<template>
  <div class="code-select">
    <van-nav-bar title="选择国家 / 地区" left-arrow @click-left="onClickLeft"/>
    <van-search v-model="countryName" placeholder="搜索" />
    <van-index-bar>
       <!--循环数据展示-->
      <div v-for="(list, key) of listDatas" :key="key">
        <van-index-anchor :index="key" />
        <div v-for="(item, index) of list" :key="item.name + index">
          <van-cell
            :title="item.name"
            :value="item.code"
            @click.stop="handleItemClick(item)"
          ></van-cell>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
 
<script>
import areaCodeInfo from "@/assets/js/areaCode.json";
export default {
  name: "codeSelect",
  props: {
    /*
     * @description 国际区号
     * */
    countryCode: {
      type: String,
      default: '86',
    },
    //点击后隐藏属性
    countryShows:{
      type:Boolean,
    }
  },
  watch: {
    countryShows(flag){
        if(flag){
            this.countryName = '';
        }
    }
  },
  data() {
    return {
      firstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        'I',
        "J",
        "K",
        "L",
        "M",
        "N",
        'O',
        "P",
        "Q",
        "R",
        "S",
        "T",
        'U',
        'V',
        "W",
        "X",
        "Y",
        "Z",
      ],
      //数据对象
      listData: {},
      //搜索名称
      countryName: "",
      //选中显示
      code: "",
    };
  },
  methods: {
    //头部返回事件
    onClickLeft(){
      this.$emit("countryUpdate", 'countryShows', false);
    },
    //点击事件
    handleItemClick({code}) {
      this.code = code;
      // 更改父组件的值
      this.$emit("countryUpdate", 'countryCode', code);
      this.$emit("countryUpdate", 'countryShows', false);
  
    },
  },
  computed: {
    //计算属性模糊搜索
    listDatas() {
      if (this.countryName) {
        let newArr = {};
        this.firstPin.forEach((item) => {
          if (this.listData[item]) {
            this.listData[item].forEach((list) => {
              if (list.name.indexOf(this.countryName) != -1 || list.code.indexOf(this.countryName) != -1) {
                if (newArr[item]) {
                  newArr[item].push(list);
                } else {
                  newArr[item] = [];
                  newArr[item].push(list);
                }
              }
            });
          }
        });
        return newArr;
      } else {
        return this.listData;
      }
    },
  },
  mounted() {},
  created() {
    //初始化数据
    this.listData = areaCodeInfo;
  },
};
</script>
 
<style scoped lang="less">
.code-select{
  height: 100%;
  overflow: hidden;
}
/deep/ .van-nav-bar__content{
  height: 1.2rem;
  line-height: 1.2rem;
}
/deep/ .van-search {
  height: 1.2rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: border-box;
  padding: .3rem;
  background-color: #fff;
}
/deep/ .van-index-bar{
  height: calc(100vh - 2.4rem);
  overflow: auto;
}
/deep/.van-index-bar__index {
  padding: 0 2.133vw 0 4.267vw;
  font-weight: 500;
  font-size: 2.667vw;
  line-height: 5.733vw;
}
/deep/ .van-index-bar__sidebar {
  top: 55%;
}
/deep/ .van-index-anchor {
  text-align: left;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 4.267vw;
  color: #323233;
  font-weight: 500;
  font-size: 3.733vw;
  line-height: 8.533vw;
  // background-color: #f0f6fb;
  border-bottom: 1px solid #fafafa;
}
/deep/ .van-cell {
  border-bottom: 1px solid #fafafa;
  padding-right: 1rem;
}
</style>